<script setup lang="ts">
import Card from "@/components/Card/index.vue";
import { useUserStore } from "@/store";
import defaultAvatar from "@/static/images/default-avatar.png";
import { textValue } from "@/utils";

const userStore = useUserStore();

const avatar = computed(() => {
	const userInfo = userStore.userInfo;
	return defaultAvatar;
});

// 登出
const handleToLogout = () => {
	userStore.logout();
};

onLoad(() => {
	if (!userStore.userMsg.nickname) {
		userStore.setUserMsg();
	}
})
</script>

<template>
	<Card class="user-info-container">
		<wd-img :width="68" :height="68" :src="avatar" class="avatar" />

		<view class="info">
			<view>
				<view class="name">{{ textValue(userStore.userMsg.nickname) }}</view>
				<view class="store">{{ textValue(userStore.userMsg.warehouse) }}</view>
			</view>

			<view class="logout-btn" @click="handleToLogout">退出登录</view>
		</view>
	</Card>
</template>

<style lang="less" scoped>
.user-info-container {
	display: flex;
	padding: 50px 30px;
	align-items: center;

	.avatar {
		border-radius: 50%;
		border: 2px solid #fff;
	}

	.shadow {
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
	}

	.info {
		margin-left: 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 1;

		.name {
			color: #000;
			font-size: 48px;
			font-style: normal;
			font-weight: 500;
			margin-bottom: 8px;
		}

		.store {
			color: rgba(0, 0, 0, 0.65);
			font-size: 28px;
			font-style: normal;
			font-weight: 400;
			transform: translateX(4px);
		}

		.logout-btn {
			padding: 12px 20px;
			border-radius: 16px;
			display: flex;
			align-items: center;
			height: 30px;
			border: 2px solid rgba(0, 82, 165, 0.8);
			color: rgba(0, 82, 165, 0.8);
			font-family: "PingFang SC";
			font-size: 30px;
			font-style: normal;
			font-weight: 500;
		}
	}
}
</style>
